<template>
  <div>
    <el-carousel
      :interval="2000"
      style="width：100vw;height:89vh"
      arrow="never"
    >
      <el-carousel-item
        v-for="item in carouselList"
        :key="item.src"
        style="width：100vw;height:89vh;"
      >
        <div class="pic_item">
          <!--1360*768 -->
          <img class="small box animated fadeInDownBig" :src="item.src" />
          <!-- <div>
            <span>本年度捐款总额：￥100000</span>
            <span class="month">本月度捐款总额：￥1000</span>
          </div> -->
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "PersonCarousel",
  props: {},
  data() {
    return {
      carouselList: [
        {
          src: require("assets/image/charity/personDonation/carousel/carousel1.png"),
        },
        {
          src: require("assets/image/charity/personDonation/carousel/carousel5.png"),
        },
        {
          src: require("assets/image/charity/personDonation/carousel/carousel6.png"),
        },
        {
          src: require("assets/image/charity/personDonation/carousel/carousel8.png"),
        },
      ],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {},

  watch: {},
};
</script>
<style scoped lang="scss">
.block {
  width: 100%;
}
.small {
  width: 100%;
  height: 100%;
  position: relative;
}

.pic_item {
  position: relative;
  height: 100%;
}
.pic_item:hover {
  cursor: pointer;
}

.pic_item img {
  width: 100%;
  height: 100%;
}

.pic_item div {
  font-size: 30px;
  width: 80%;
  height: 5vh;
  background-color: rgba($color: #f5f7fa, $alpha: 0.9);
  color: rgb(250, 190, 190);
  position: absolute;
  left: 10vw;
  bottom: 2rem;
  line-height: 5vh;
  .month {
    float: right;
  }
}
</style>
